import React from 'react';
import { StyleSheet,  View, FlatList, Image, Dimensions, ActivityIndicator } from 'react-native';
import {getPageFlatListData} from "./testServer/FlatListDataServer";
import {
  Container,
  Header,
  Content,
  Card,
  CardItem,
  Thumbnail,
  Text,
  Button,
  Icon,
  Left,
  Body,
  Title,
  Right,
  Footer,
  FooterTab,
  Badge
} from 'native-base';

import TimeAgo from 'react-native-timeago';
let moment = require('moment'); //load moment module to set local language
require('moment/locale/zh-cn'); //for import moment local language file during the application build
moment.locale('zh-cn'); //set moment local language to zh-cn
import FitImage from 'react-native-fit-image';


const FlatListItem = props =>{
  const{item} = props;
  return (
    <Card style={{ flex: 0 }}>
      <CardItem>
        <Left>
          <Thumbnail source={{ uri: item.avatar }} />
          <Body>
            <Text>{item.name}</Text>
            <Text note>
              <TimeAgo time={item.publishDate} />
            </Text>
          </Body>
        </Left>
      </CardItem>
      <CardItem>
        <Image
          source={{ uri: item.img }}
          resizeMode="cover"
          style={{ height: 200, width: Dimensions.get('window').width, flex: 1 }}
        />
      </CardItem>

      <CardItem>
        <Body>
          <Text>{item.text}</Text>
        </Body>
      </CardItem>

      <CardItem>
        <Left>
            <Icon name="logo-github" />
            <Text>{item.star}</Text>
        </Left>
      </CardItem>



    </Card>
  )
}
export default class App extends React.Component {
  state = {
    flatListDataFromSever: [],
    page: 1,
    isLoadMore: false,
    refreshing: false
  };

  makeRemoteRequest = () => {
    this.setState({
      isLoadMore: true,
      refreshing: true
    });
    setTimeout(() => {
      getPageFlatListData({ page: this.state.page }).then(data => {
        this.setState({
          flatListDataFromSever: [...this.state.flatListDataFromSever, ...data],
          isLoadMore: false,
          refreshing: false
        });
      });
    }, 2000);
  };

  componentDidMount() {
    this.makeRemoteRequest();
  }

  loadMoreHandler = () => {
    if (!this.state.isLoadMore) {
      console.log('loadMoreHandler------>');
      // 准备请求第2页数据的内容
      this.setState(
        prevState => {
          return {
            page: prevState.page + 1
          };
        },
        () => {
          this.makeRemoteRequest();
        }
      );

    }
  };

  renderFooter = () => {
    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: '#e5e5e5'
        }}
      >
        <ActivityIndicator animating={true} size="small" />
      </View>
    );
  };

  refreshHandler = () => {
    if (!this.state.isLoadMore) {
      this.setState(
        {
          page: 1,
          refreshing: true,
          flatListDataFromSever: []
        },
        () => {
          this.makeRemoteRequest();
        }
      );
    }
  };

  _keyExtractor = (item, index) => item.id.toString();

  render() {
    return (
      <Container>

          <FlatList
            keyExtractor={this._keyExtractor}
            data={this.state.flatListDataFromSever}
            renderItem={({ item, index }) => {
              return <FlatListItem item={item} index={index} />;
            }}
            onEndReachedThreshold={0}
            onEndReached={this.loadMoreHandler}
            ListFooterComponent={this.renderFooter}
            onRefresh={this.refreshHandler}
            refreshing={this.state.refreshing}
          />
       
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
